<template>
	<view class="container">
		<z-paging ref="paging" v-model="itemList" @query="queryList" :flex="true" empty-view-text="暂无数据~"
			empty-view-img="/static/empty.png" :empty-view-img-style="imgStyle">
			<view slot="top">
				<u-navbar height="50" back-icon-color="#333"
					title="账单记录" title-color="#333" title-size="36"></u-navbar>
				<view class="subsidyTopView">
					<view class="subsidyView">
						<view class="subsidySelect" @click="onSelectTime">
							<view class="subsidyTime">{{showTime}}</view>
							<image class="subsidyIcon" src="/static/dwon.png" mode="aspectFit"></image>
						</view>
						<view class="subsidyPrice">
							<text style="margin-right: 20rpx;">收入：¥{{income}}</text>
							<text>支出：¥{{expenditure}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="centerView">
				<view class="itemView" v-for="(item,index) in itemList" :key="index">
					<view class="itemHead">
						<view class="itemTitle">{{item.title}}</view>
						<view class="itemMoney" v-if="item.type == 1 || item.type == 4">-{{item.amount}}</view>
						<view class="itemMoney" v-else>+{{item.amount}}</view>
					</view>
					<view class="itemTime">{{item.created_at}}</view>
				</view>
			</view>
		</z-paging>
		<u-picker v-model="timePicker" mode="time" :params="params" @confirm="onConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgStyle: {
					width: '12rem'
				},
				params: {
					year: true,
					month: true,
				},
				timePicker: false,
				showTime: '',
				selectTime: '',
				page: 1,
				itemList: [],
				income: '0.00',
				expenditure: '0.00'
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData() {
				let self = this
				this.showTime = this.$utils.getDate('YM');
				this.selectTime = this.$utils.getDate('Y-M');
				this.$nextTick(function() {
					self.$refs.paging.reload();
				});
			},
			queryList(page, pageSize) {
				let self = this
				self.$user.billsRecord({
					limit: pageSize,
					page: page,
					ym: this.selectTime
				}, true).then(res => {
					self.income = res.others?.revenue;
					self.expenditure = res.others?.expenditures;
					self.$refs.paging.complete(res.list);
				}).catch(res=>{
					self.$refs.paging.complete();
				})
			},
			onSelectTime() {
				this.timePicker = true;
			},
			onConfirm(e) {
				this.selectTime = e.year + '-' + e.month;
				this.showTime = e.year + "年" + e.month + "日";
				this.$refs.paging.reload();
			},
		}
	}
</script>

<style>
	@import url('wallet-record.css');

	page {
		height: 100%;
		background-color: #FAFBFC;
	}
</style>
